/* power of clarity stylesheet */

/* CSS for PowerofClarity.com */

/* DEFAULT BEHAVIOR - smallest screens */
/* Body Global - Styles */

 
/** {	box sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}
	*/
	

/** OUTLINE ///////////////////////////////////////

---by section-------------------------
ALL/MULTI SECTION
HEADER
	BANNER CONTENT
		LEFT SIDE
			LOGO IMAGE LINK
			NAME OF SITE LINK
		RIGHT SIDE 
			800#
			SECONDARY PERSONAL NAV BAR
				LOGIN
				HELP
	MAIN NAV BAR
	
MAIN CONTENT DIV
	HEADERS
	PARAGRAPHS
	BULLET POINTS
	LINKS WITHIN TEXT
	IMAGES
	DISCLAIMER

FOOTER
	DELINEATING LINE DIV (PAGEWIDTH WIDE BLOCK)
	BELOW THE LINE QUICK FIND 
		CONTACT
		HELP
		DISCLAIMER
		TERMS OF SERVICE
	COPYRIGHT NOTICE
		    
		
---by type---------------------------------


#IDs 	 - ID's
.classes - 
Selectors 

All by alphabetical order with no regard to punctuation? to start
If this doesn't work, change to respect punctuation (eg #, .)


**/







/******* ALL/MULTI-SECTION Selectors ****************************/

/*
html{
display: table;
margin: auto;
}
*/


body { /* BODY TAG = #page */
	height: 100%;
	width: 100%;
	color: black;
	background-color: #FCFCFC; /*background color outside page margins*/
	font-family: verdana, calibri, arial, cambria, helvetica, sans-serif;
	font-size: 100%;
	font-weight: light 100% ;
	margin: auto;
/*	margin-left: auto;
	margin-right: auto;
	margin-top: 0em; */
	max-width: 900px;
/*	display: table-cell;*/
	padding-left: 0px;
	font-weight: light;
	padding-top: 0em;
 /*   vertical-align: middle;*/
	border: 1px;
		margin: auto;
	justify-content: center;
	
	}


.green {
color: rgb(0,210,0);
/*mediumseagreen or green or rgba(red, green, blue, alpha) rgb(red, green blue)*/
}

p a {
	text-decoration: underline;
	
}


/***** HEADER including main nav (not to be confused with "HEAD" section which is for metadata)*********/

nav ul {
	list-style-type: none;
	padding: 0;
	/*margin: 0;*/
	/*margin: 9px 0 15px;*/
	margin: 0em 0 0;
	width: 100%; 

/*	float: left; */
	}

nav ul li {
	border: 0.15em solid;
	/*border-style: solid;*/
	border-color: #666;
	/*border-color: rgb(255,243,213);*/
	background-color: #eee;
	/*background-color: #eee; */
	display: block;
/*	float:left; */
	margin: 0em 0 0;
	padding: 0.3em 0em;
	text-align: center;
	/* float: left; //X causes links to wrap*/
	width: 100%;
}


nav ul li a {
	text-decoration: none;
	font-size: 1.5em;
	display: block;
	width: 100%;
	/* float: left; //X causes links to wrap*/
	}




ul li a:hover {
	color: navy;
}


	
/*li {display: inline-block;}

nav li a {
font-style: normal;
}
*/


.text-link {
text-decoration: underline:
color: mediumseagreen;/*mediumseagreen*/
}

a:link {
  color: mediumseagreen; /*3cb371*/
  background-color: transparent;
  text-decoration: none;
}

/*a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}*/

a:hover {
  color: lightseagreen;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: green;
  background-color: transparent;
  text-decoration: no;
}



i {
	font-size: .8em;
	background-color: mintcream;
}	

ul.callout {  
	
    line-height:160%;
    /*sets to h3 default - mostly*/
    font-size: 1.17 em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: bold; 
	}
	
	
li.callout ul {
	line-height:110%;
	}




p {background-color:white;}
/*
.nav-div {
background-color: green;
width: 100%;
}	*/






/*** UNIQUE ID's ***************************************/


	
	
#overall-page { /* OUTERMOST DIV */
	background-color: white;
	position: absolute;
	top: 0em;
	padding-top: 0em;
	
	}
	
	
#main { /*main div below main nav*/
	margin-left: .5em;
	margin-right: .5em;
	}
	
/*
#main-page-padding {
	width: 20%;
	margin-top: 0em;
/*	margin: 7%; 
	margin: 0.25em;*/
	}
*/


#header {
	margin-top: 0em;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 1em;
	padding-left: .9em;
	padding-right: .9em;
	padding-bottom: .3em;
	}


#logo-link {
	align: left;
	margin-left: 0em;
	}

#namelink { /* anchor - HP link*/
	color: mediumseagreen; /*#3CB371*/
	/*vertical-align: top;*/
	/*display: "inline-block";*/
	/*align: "left"";*/
	/*float: "right";*/
	}
	
#namelink, tagline {
	display: block;
	align-content: left;
	}


#homelinks{
	align: "left";
	}


#tagline {
	font-size: 70%;
	font-display: italic;
	line-height: 10%;
	align: left;
	display: block;
	}
	
#headertext-left {
	float: right;
	}	



#main-content {
	padding-top: 2em;
	padding-left: .9em;
	padding-right: .9em;
	}


#phone {
	align-content: bottom;

	}
	
	

#main-nav {
	width: 110%;
	float: left;
	padding-top: 0.5em;
	padding-bottom: 2em;
	padding-left: 0em;
	margin-left: 0em;
	}



#disclaimer {
	font-style: italic;
	background-color: #eee;
	margin-top: 1.5em;
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 2em;
	}
}

/* Main Content - Styles */


/* Footer 1 - Styles */


/* Footer 2 - Styles */

/*}*/
/*media queries - based on smallest = mobile phones = default: */
/* @media query - 2nd smallest screens = largest phones & small tablets: */







/******CLASSES*************************************/
.center {
	margin: auto;
	text-align: center;
}
.green {
	color: mediumseagreen;
}
.full-width { /* nav ul li a  */
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
/*color: pink;*/
}

text-align: center;
}

.text-at-top {
	margin-top: 0;
	}

	/* Floats & Clears */ /* clearleft works, floats don't work */
.floatleft 	{float: left;}	
.floatright {float: right;}	
.clearleft	{clear: left;}
	/*	* {color: red;} */
	
div.floatleft {float: left;}
div.floatright {float: right;}
div.clearleft {clear: left;}
	/*}*/
.clearleft {clear: left}
.clearright {clear: right}

/*
.nav-li {
	display: inline-block;
	background-color: green;
		width: 25%;
	}

.nav-li-a {
	display: block; 
	float: left; 
	background-color: green;

	}

nav {color: green;}
*/


ul.bulleted{
	
	}



/**** FOOTER *****************************************************/


footer {
	background-color: gray;
	color: white;

}

footer ul{
display: inline-block;
	}
	



/***** @MEDIA QUERIES *************************************/


@media only screen and (min-width: 600px) {

nav {
width:100%;
}

nav ul {
background-color: white;
width: 95%;
margin: auto;
white-space: nowrap;
}

nav ul li	{
width: 22%;
display:inline-block; 
margin: auto;
text-align: center;
}




/* end @media query for narrowest screens */

/*TESTING ZONE

	*/